<template>
	<div class="payment_page">
		<!-- 步骤进度条 -->
		<div class="steps_container">
			<div class="steps_wrapper">
				<div class="step_item completed">
					<div class="step_number">1</div>
					<div class="step_label">{{ t('step1') }}</div>
				</div>
				<div class="step_line completed"></div>
				<div class="step_item active">
					<div class="step_number">2</div>
					<div class="step_label">{{ t('step2') }}</div>
				</div>
				<div class="step_line"></div>
				<div class="step_item">
					<div class="step_number">3</div>
					<div class="step_label">{{ t('step3') }}</div>
				</div>
			</div>
		</div>

		<!-- 主要内容区 -->
		<div class="main_content">
			<!-- 订单信息卡片 -->
			<div class="order_info_card">
				<h3 class="card_title">{{ t('orderInformation') }}</h3>
				<div class="order_number">
					<span class="label">{{ t('orderNumber') }}：</span>
					<span class="value">{{ orderNumber }}</span>
				</div>
				<div class="payment_amount">
					<span class="label">{{ t('paymentAmountLabel') }}：</span>
					<span class="amount">¥{{ formattedAmount }}</span>
					<a href="#" class="detail_link" @click.prevent="showDetailDialog = true">{{ t('collapseDetails') }} ▲</a>
				</div>
			</div>

			<!-- 会议和参会详情表格 -->
			<div class="details_table_card">
				<div class="table_header">
					<div class="col">{{ t('conferencePeriod') }}</div>
					<div class="col">{{ t('numberOfParticipants') }}</div>
					<div class="col">{{ t('registrationFeeDetails') }}</div>
				</div>
				<div class="table_body">
					<!-- 会议信息行 -->
					<div class="info_row">
						<div class="meeting_info">
							<div class="meeting_tag">【IEEE 检索会后4个月检索|重轻主办】</div>
							<div class="meeting_title">{{ $getBilingualText(orderData.conference_name) }}</div>
							<div class="meeting_meta">
								<span>{{ $formatDateTime(orderData.meeting_time, 'datetime') }}</span>
								<span class="separator">|</span>
								<span>{{ $getBilingualText(orderData.meeting_venue) }}</span>
							</div>
						</div>
						<div class="attendee_count">
							<div class="count_label">{{ t('totalPeople') }}</div>
							<div class="count_value">{{ attendeeCount }}</div>
							<div class="sub_items">
								<div>{{ t('accommodation') }} {{ accommodationCount }}</div>
								<div>{{ t('meal') }} {{ mealCount }}</div>
							</div>
						</div>
						<div class="fee_details">
							<div class="fee_item">
								<div class="fee_row">
									<span class="fee_label">{{ t('registrationTypeLabel') }}</span>
									<span class="fee_value">{{ t('unitPrice') }}</span>
									<span class="fee_value">{{ t('quantity') }}</span>
									<span class="fee_value">{{ t('totalPrice') }}</span>
								</div>
								<div class="fee_row highlight">
									<span class="fee_label">{{ registrationTypeName }}</span>
									<span class="fee_value">{{ unitPrice }}</span>
									<span class="fee_value">{{ attendeeCount }}</span>
									<span class="fee_value">{{ totalPrice }}</span>
								</div>
							</div>
						</div>
					</div>
				</div>

				<!-- 总价格 -->
				<div class="total_price_row">
					<span class="total_label">{{ t('totalPriceLabel') }}</span>
					<span class="total_amount">¥ {{ formattedAmount }}</span>
				</div>
			</div>

			<!-- 支付方式选择 -->
			<div class="payment_method_card">
				<h3 class="section_title">{{ t('selectPaymentMethod') }}</h3>
				
				<!-- 在线支付 -->
				<div class="payment_option">
					<input type="radio" id="online_payment" value="online" v-model="paymentMethod" checked>
					<label for="online_payment" class="payment_label">
						<span class="radio_icon"></span>
						<span>{{ t('onlinePayment') }}</span>
					</label>
					<a href="#" class="more_methods" @click.prevent="toggleMethods">{{ t('morePaymentMethods') }}</a>
				</div>

				<!-- 支付方式选项 -->
				<div class="payment_methods" v-if="showMethods">
					<div class="method_title">{{ t('selectPaymentMethod') }}：</div>
					<div class="method_options">
						<div 
							class="method_item" 
							:class="{ active: selectedPayType === 'wechat' }"
							@click="selectPayType('wechat')">
							<div class="method_icon wechat">
								<svg viewBox="0 0 1024 1024" width="48" height="48">
									<path d="M664.250054 368.541681c10.015098 0 19.892049 0.732687 29.67281 1.795902-26.647917-122.810047-159.358451-214.077703-310.826188-214.077703-169.353083 0-308.085774 114.232694-308.085774 259.274068 0 83.708494 46.165436 152.460344 123.281791 205.78483l-30.80868 91.730191 107.688651-53.455469c38.558178 7.53665 69.459978 15.308661 107.924012 15.308661 9.66308 0 19.230993-0.470721 28.752858-1.225921-6.025227-20.36584-9.521864-41.723264-9.521864-63.862493C402.328693 476.632491 517.908058 368.541681 664.250054 368.541681zM498.62897 285.87389c23.200398 0 38.557154 15.120372 38.557154 38.061874 0 22.846334-15.356756 38.156018-38.557154 38.156018-23.107277 0-46.260603-15.309684-46.260603-38.156018C452.368366 300.994262 475.522716 285.87389 498.62897 285.87389zM283.016307 362.090758c-23.107277 0-46.402843-15.309684-46.402843-38.156018 0-22.941502 23.295566-38.061874 46.402843-38.061874 23.081695 0 38.46301 15.120372 38.46301 38.061874C321.479317 346.782098 306.098002 362.090758 283.016307 362.090758zM945.448458 606.151333c0-121.888048-123.258255-221.236753-261.683307-221.236753-146.57838 0-262.015505 99.348706-262.015505 221.236753 0 122.06508 115.437126 221.200938 262.015505 221.200938 30.66644 0 61.617359-7.609305 92.423993-15.262612l84.513836 45.786813-23.178909-76.17082C899.379213 735.776599 945.448458 674.90216 945.448458 606.151333zM598.803483 567.994292c-15.332197 0-30.807656-15.096836-30.807656-30.501688 0-15.190981 15.47546-30.477129 30.807656-30.477129 23.295566 0 38.558178 15.286148 38.558178 30.477129C637.361661 552.897456 622.099049 567.994292 598.803483 567.994292zM768.25071 567.994292c-15.213493 0-30.594809-15.096836-30.594809-30.501688 0-15.190981 15.381315-30.477129 30.594809-30.477129 23.107277 0 38.558178 15.286148 38.558178 30.477129C806.808888 552.897456 791.357987 567.994292 768.25071 567.994292z" fill="#00C800"></path>
								</svg>
							</div>
							<div class="method_name">{{ t('wechatPay') }}</div>
						</div>
						<div 
							class="method_item" 
							:class="{ active: selectedPayType === 'alipay' }"
							@click="selectPayType('alipay')">
							<div class="method_icon alipay">
								<svg viewBox="0 0 1024 1024" width="48" height="48">
									<path d="M1024 701.1v205.5c0 64.6-52.4 117-117 117H117c-64.6 0-117-52.4-117-117V117C0 52.4 52.4 0 117 0h790c64.6 0 117 52.4 117 117v584.1z" fill="#00A0E9"></path>
									<path d="M784.3 849.7c95.5-31.8 174.8-110.1 207.7-205.5H701.7c13.2 60.8 32 121.4 82.6 205.5z" fill="#FFFFFF"></path>
									<path d="M701.7 644.2h290.3c2.6-23.7 4-47.7 4-71.9 0-242.7-196.7-439.4-439.4-439.4S117.2 329.6 117.2 572.3s196.7 439.4 439.4 439.4c95.5 0 184.1-30.5 256.4-82.1-50.6-84.1-69.4-144.7-82.6-205.5-54.6 40.1-122.1 64-195.4 64-179.5 0-325-145.5-325-325s145.5-325 325-325 325 145.5 325 325c0 23.7-2.5 46.8-7.3 69.1z" fill="#FFFFFF"></path>
								</svg>
							</div>
							<div class="method_name">{{ t('alipay') }}</div>
						</div>
					</div>

					<!-- 支付金额显示 -->
					<div class="payment_summary">
						<span class="summary_label">{{ t('paymentAmount') }}：</span>
						<span class="summary_amount">¥ {{ formattedAmount }}</span>
					</div>
				</div>
			</div>

			<!-- 提交按钮 -->
			<div class="submit_section">
				<button class="btn_submit" @click="processPayment">
					{{ t('payNow') }}
				</button>
			</div>
		</div>

		<!-- 详情对话框 -->
		<el-dialog :title="t('orderDetailsTitle')" :visible.sync="showDetailDialog" width="600px">
			<div class="dialog_content">
				<div class="detail_row">
					<span class="detail_label">{{ t('meetingNameLabel') }}：</span>
					<span class="detail_value">{{ $getBilingualText(orderData.conference_name) }}</span>
				</div>
				<div class="detail_row">
					<span class="detail_label">{{ t('meetingTimeLabel') }}：</span>
					<span class="detail_value">{{ $formatDateTime(orderData.meeting_time, 'datetime') }}</span>
				</div>
				<div class="detail_row">
					<span class="detail_label">{{ t('meetingVenueLabel') }}：</span>
					<span class="detail_value">{{ $getBilingualText(orderData.meeting_venue) }}</span>
				</div>
				<div class="detail_row">
					<span class="detail_label">{{ t('registrationType') }}：</span>
					<span class="detail_value">{{ registrationTypeName }}</span>
				</div>
				<div class="detail_row">
					<span class="detail_label">{{ t('attendeeCount') }}：</span>
					<span class="detail_value">{{ attendeeCount }} {{ t('person') }}</span>
				</div>
				<div class="detail_row">
					<span class="detail_label">{{ t('unitPriceLabel') }}：</span>
					<span class="detail_value">¥ {{ unitPrice }}</span>
				</div>
				<div class="detail_row total">
					<span class="detail_label">{{ t('totalAmount') }}：</span>
					<span class="detail_value">¥ {{ formattedAmount }}</span>
				</div>
			</div>
		</el-dialog>

		<!-- 支付二维码弹窗 -->
		<div class="payment_modal" v-if="showPaymentModal" @click.self="closePaymentModal">
			<div class="payment_modal_content">
				<!-- 弹窗头部 -->
				<div class="modal_header" :class="{ 'wechat': selectedPayType === 'wechat', 'alipay': selectedPayType === 'alipay' }">
					<span class="modal_title">{{ selectedPayType === 'wechat' ? t('wechatPay') : t('alipay') }}</span>
					<span class="modal_close" @click="closePaymentModal">×</span>
				</div>
				
				<!-- 弹窗主体 -->
				<div class="modal_body">
					<!-- 支付金额 -->
					<div class="payment_amount_display">
						<span class="amount_label">{{ t('paymentAmountLabel') }}:</span>
						<span class="amount_value">¥{{ formattedAmount }}</span>
					</div>
					
					<!-- 二维码 -->
					<div class="qrcode_container">
						<div class="qrcode_wrapper">
							<img v-if="qrcodeUrl" :src="qrcodeUrl" :alt="t('paymentQRCode')" class="qrcode_image" />
							<div v-else class="qrcode_loading">
								<span>{{ t('generatingQRCode') }}</span>
							</div>
							<!-- 刷新按钮 -->
							<div v-if="qrcodeUrl" class="qrcode_refresh_btn" @click="refreshQRCode" :title="t('refreshQRCode')">
								<svg viewBox="0 0 1024 1024" width="24" height="24">
									<path d="M755.2 192l-64-64-192 192 192 192 64-64-96-96 96-96zM268.8 832l64 64 192-192-192-192-64 64 96 96-96 96zM864 576c0-176-144-320-320-320-53.024 0-103.008 13.024-146.976 35.872l-55.04-55.04-64 64 96 96 64-64-22.016-22.016C407.968 277.248 447.008 256 512 256c141.376 0 256 114.624 256 256s-114.624 256-256 256c-64.992 0-104.032-21.248-129.024-54.912l22.016-22.016-64-64-96 96 64 64 55.04-55.04C408.992 762.976 458.976 768 512 768c176 0 320-144 320-320z" fill="#666"></path>
								</svg>
							</div>
						</div>
					</div>
					
					<!-- 提示文字 -->
					<div class="payment_tips">
						{{ selectedPayType === 'wechat' ? t('wechatPayQRCode') : t('alipayQRCode') }}
						<div v-if="isMockQRCode" class="mock_tip">
							⚠️ {{ t('mockQRCodeTip') }}
						</div>
						<div v-if="!isMockQRCode && isSandbox" class="sandbox_tip">
							⚠️ <strong>重要提示：</strong>当前为沙箱环境，必须使用<strong>支付宝沙箱测试账号</strong>扫码支付！<br>
							普通支付宝账号扫码会提示"二维码已失效"。<br>
							获取沙箱账号：支付宝开放平台 → 开发助手 → 沙箱应用 → 沙箱账号
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import mixinI18n from "@/mixins/i18n.js";

export default {
	name: 'UserParticipationPayment',
	mixins: [mixinI18n],
	data() {
		return {
			orderNumber: '',
			orderData: {},
			attendees: [],
			paymentMethod: 'online',
			selectedPayType: 'wechat',
			showMethods: true,
			showDetailDialog: false,
			showPaymentModal: false,
			qrcodeUrl: '',
			userParticipationId: null,
			paymentCheckInterval: null,
			isMockQRCode: false,
			isSandbox: false
		}
	},
	computed: {
		attendeeCount() {
			return this.attendees.length;
		},
		accommodationCount() {
			// 统计需要住宿的人数
			return this.attendees.filter(a => a.participationType === 'onsite').length;
		},
		mealCount() {
			// 统计需要用餐的人数（示例，可根据实际需求调整）
			return 0;
		},
		registrationTypeName() {
			const lang = this.currentLanguage || 'zh';
			if (lang === 'en') {
				const typeMap = {
					'poster': 'Poster Presentation',
					'oral': 'Oral Presentation',
					'listener': 'Listener'
				};
				return typeMap[this.orderData.registration_type] || 'Listener';
			} else {
				const typeMap = {
					'poster': 'Poster Presentation/墙报展示',
					'oral': 'Oral Presentation/口头报告',
					'listener': 'Listener/听众'
				};
				return typeMap[this.orderData.registration_type] || 'Listener/听众';
			}
		},
		unitPrice() {
			if (!this.attendeeCount || !this.orderData.amount_of_participation) return 0;
			return Math.floor(this.orderData.amount_of_participation / this.attendeeCount);
		},
		totalPrice() {
			return this.orderData.amount_of_participation || 0;
		},
		formattedAmount() {
			return (this.orderData.amount_of_participation || 0).toLocaleString();
		}
	},
	methods: {
		// 格式化日期时间
		formatDateTime(value) {
			if (!value) return '';
			// 如果是时间戳（数字）
			if (typeof value === 'number') {
				const date = new Date(value);
				if (isNaN(date.getTime())) {
					return value;
				}
				return this.formatDate(date);
			}
			// 如果是字符串，尝试解析
			if (typeof value === 'string') {
				// 如果是时间戳字符串
				if (/^\d{10,13}$/.test(value)) {
					const timestamp = value.length === 10 ? parseInt(value) * 1000 : parseInt(value);
					const date = new Date(timestamp);
					if (!isNaN(date.getTime())) {
						return this.formatDate(date);
					}
				}
				// 尝试解析日期字符串
				const date = new Date(value);
				if (!isNaN(date.getTime())) {
					return this.formatDate(date);
				}
				return value;
			}
			// 如果是Date对象
			if (value instanceof Date) {
				return this.formatDate(value);
			}
			return String(value);
		},
		// 格式化日期为可读字符串
		formatDate(date) {
			if (!date || !(date instanceof Date) || isNaN(date.getTime())) {
				return '';
			}
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const day = String(date.getDate()).padStart(2, '0');
			const hours = String(date.getHours()).padStart(2, '0');
			const minutes = String(date.getMinutes()).padStart(2, '0');
			const seconds = String(date.getSeconds()).padStart(2, '0');
			return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
		},
		generateOrderNumber() {
			// 生成订单编号：ORDER_{user_participation_id}_{timestamp}{random}
			// 格式：ORDER_123_202411011234567890
			// 这样后端可以通过订单号提取 user_participation_id 来更新支付状态
			const date = new Date();
			const dateStr = date.getFullYear() + 
							String(date.getMonth() + 1).padStart(2, '0') + 
							String(date.getDate()).padStart(2, '0') + 
							String(date.getHours()).padStart(2, '0') + 
							String(date.getMinutes()).padStart(2, '0') + 
							String(date.getSeconds()).padStart(2, '0');
			const random = Math.floor(Math.random() * 10000).toString().padStart(4, '0');
			// 包含 user_participation_id，方便后端匹配
			const userId = this.userParticipationId || '0';
			return `ORDER_${userId}_${dateStr}${random}`;
		},
		toggleMethods() {
			this.showMethods = !this.showMethods;
		},
		selectPayType(type) {
			this.selectedPayType = type;
		},
		async generateQRCode() {
			try {
				// 调用后端接口获取支付二维码
				const params = {
					user_participation_id: this.userParticipationId,
					pay_type: this.selectedPayType,
					order_number: this.orderNumber,
					amount: this.orderData.amount_of_participation
				};
				
				const json = await this.$get('~/api/user_participation/get_payment_qrcode?', params);
				
				// 检查是否有错误
				if (json.error) {
					const errorMsg = json.error.message || '获取支付二维码失败';
					this.$message.error(errorMsg);
					// 如果是配置未完成的错误，显示详细提示
					if (errorMsg.includes('配置未完成')) {
						this.$message({
							message: '请先在application.yml中配置微信支付参数（appId、mchId、apiKey）',
							type: 'warning',
							duration: 5000
						});
					}
					// 不再使用备用方案，直接返回错误
					this.qrcodeUrl = '';
					return;
				}
				
				if (json.result && json.result.qrcode_url) {
					// 使用后端返回的二维码URL（可能是Base64格式或网络URL）
					this.qrcodeUrl = json.result.qrcode_url;
					this.isMockQRCode = json.result.mock || false;
					this.isSandbox = json.result.sandbox_warning || false;
					
					// 如果是模拟数据，显示提示
					if (this.isMockQRCode) {
						this.$message({
							message: '当前使用模拟支付二维码（测试用），扫码会提示失效。如需真实支付，请配置支付宝参数并设置 useMock: false',
							type: 'warning',
							duration: 5000
						});
					} else {
						// 真实二维码生成成功
						const qrContent = json.result.qrcode_content || '';
						console.log('支付宝二维码内容：', qrContent);
						
						// 检查是否为沙箱环境
						if (json.result.sandbox_warning) {
							this.$message({
								message: '⚠️ 沙箱环境：必须使用支付宝沙箱测试账号扫码，普通账号扫码会提示失效！请到支付宝开放平台获取沙箱账号。',
								type: 'warning',
								duration: 8000,
								showClose: true
							});
						} else {
							this.$message({
								message: '真实支付二维码已生成，请使用支付宝扫码支付',
								type: 'success',
								duration: 5000
							});
						}
					}
				} else {
					// 如果后端返回失败且没有错误信息，可能是其他问题
					const errorMsg = json.result?.message || '获取二维码失败，请检查后端日志';
					this.$message.error(errorMsg);
					this.qrcodeUrl = '';
				}
			} catch (error) {
				console.error('获取支付二维码失败:', error);
				const errorMsg = error.response?.data?.error?.message || error.message || '获取支付二维码失败，请重试';
				this.$message.error(errorMsg);
				// 不再使用备用方案
				this.qrcodeUrl = '';
			}
		},
		async processPayment() {
			// 如果选择的是支付宝，直接跳转到网页支付页面
			if (this.selectedPayType === 'alipay') {
				await this.goToAlipayPagePay();
			} else {
				// 微信支付：显示二维码弹窗
				this.showPaymentModal = true;
				// 生成并获取支付二维码
				await this.generateQRCode();
				// 开始轮询检查支付状态（可选）
				this.startPaymentCheck();
			}
		},
		async goToAlipayPagePay() {
			try {
				this.$message.info('正在跳转到支付宝支付页面...');
				
				// 构建返回URL（支付成功后支付宝会跳转到这个地址）
				// 注意：这里应该传递后端回调地址，后端会处理支付状态更新后再重定向到前端成功页面
				// 后端地址格式：http://域名:端口/api/payment/alipay/return
				const protocol = window.location.protocol;
				const hostname = window.location.hostname;
				const port = window.location.port;
				
				// 根据前端端口判断后端端口
				// 前端8081/8082 -> 后端5000 (从application.yml确认)
				let backendPort = '5000'; // 后端默认端口
				if (port === '8081' || port === '8082') {
					backendPort = '5000';
				} else if (port === '8080') {
					backendPort = '5000';
				}
				
				const returnUrl = `${protocol}//${hostname}:${backendPort}/api/payment/alipay/return`;
				
				console.log('配置支付宝return_url:', returnUrl, '前端端口:', port, '后端端口:', backendPort);
				
				// 调用后端接口获取支付宝网页支付链接
				const params = {
					user_participation_id: this.userParticipationId,
					order_number: this.orderNumber,
					amount: this.orderData.amount_of_participation,
					return_url: returnUrl
				};
				
				const json = await this.$get('~/api/user_participation/get_alipay_page_pay?', params);
				
				// 检查是否有错误
				if (json.error) {
					const errorMsg = json.error.message || '获取支付链接失败';
					this.$message.error(errorMsg);
					return;
				}
				
				if (json.result && json.result.pay_url) {
					// 获取支付表单HTML
					const payFormHtml = json.result.pay_url;
					
					// 创建临时表单并提交（跳转到支付宝）
					const formDiv = document.createElement('div');
					formDiv.innerHTML = payFormHtml;
					document.body.appendChild(formDiv);
					
					// 自动提交表单，跳转到支付宝支付页面
					const form = formDiv.querySelector('form');
					if (form) {
						form.submit();
					} else {
						// 如果没有form，可能是直接返回的URL
						window.location.href = payFormHtml;
					}
					
					// 提示用户
					if (json.result.sandbox_warning) {
						this.$message({
							message: '⚠️ 沙箱环境：请使用支付宝沙箱测试账号登录支付',
							type: 'warning',
							duration: 5000
						});
					}
				} else {
					this.$message.error('获取支付链接失败，请重试');
				}
			} catch (error) {
				console.error('跳转到支付宝支付页面失败:', error);
				const errorMsg = error.response?.data?.error?.message || error.message || '跳转支付页面失败，请重试';
				this.$message.error(errorMsg);
			}
		},
		startPaymentCheck() {
			// 每3秒检查一次支付状态
			this.paymentCheckInterval = setInterval(async () => {
				try {
					// 使用正确的API接口：get_obj 而不是 get
					const json = await this.$get(`~/api/user_participation/get_obj?user_participation_id=${this.userParticipationId}`);
					// get_obj返回的结构是 {result: {obj: {...}}}
					if (json.result && json.result.obj && json.result.obj.pay_state === '已支付') {
						clearInterval(this.paymentCheckInterval);
						this.closePaymentModal();
						this.$message.success('支付成功！');
						setTimeout(() => {
							this.$router.push({
								path: '/user_participation/success',
								query: {
									order_number: this.orderNumber,
									user_participation_id: this.userParticipationId
								}
							});
						}, 1000);
					}
				} catch (error) {
					console.error('检查支付状态失败:', error);
					// 如果接口调用失败，停止轮询
					// clearInterval(this.paymentCheckInterval);
				}
			}, 3000);
		},
		closePaymentModal() {
			this.showPaymentModal = false;
			if (this.paymentCheckInterval) {
				clearInterval(this.paymentCheckInterval);
				this.paymentCheckInterval = null;
			}
			// 清空二维码，下次打开时重新生成
			this.qrcodeUrl = '';
			this.isMockQRCode = false;
		},
		async refreshQRCode() {
			// 刷新二维码
			this.qrcodeUrl = '';
			this.$message.info('正在刷新二维码...');
			await this.generateQRCode();
		},
		loadOrderData() {
			// 从路由参数获取订单数据
			const orderDataStr = this.$route.query.orderData;
			if (orderDataStr) {
				try {
					const data = JSON.parse(decodeURIComponent(orderDataStr));
					this.orderData = data;
					this.userParticipationId = data.user_participation_id;
					
					// 解析参会人信息
					if (data.attendees_data) {
						this.attendees = JSON.parse(data.attendees_data);
					}
					
					// 生成订单编号
					this.orderNumber = this.generateOrderNumber();
				} catch (e) {
					console.error('解析订单数据失败:', e);
					this.$message.error('订单数据错误');
					setTimeout(() => {
						this.$router.go(-1);
					}, 2000);
				}
			} else {
				this.$message.error('未找到订单信息');
				setTimeout(() => {
					this.$router.go(-1);
				}, 2000);
			}
		}
	},
	mounted() {
		this.loadOrderData();
	},
	beforeDestroy() {
		// 组件销毁前清除定时器
		if (this.paymentCheckInterval) {
			clearInterval(this.paymentCheckInterval);
		}
	}
}
</script>

<style scoped>
.payment_page {
	min-height: 100vh;
	background: #f5f7fa;
	padding-bottom: 4rem;
}

/* 步骤条样式 */
.steps_container {
	background: white;
	padding: 2rem 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	margin-bottom: 2rem;
}

.steps_wrapper {
	max-width: 600px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.step_item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
}

.step_number {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 2px solid #ddd;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	color: #999;
	background: white;
}

.step_item.completed .step_number {
	background: #42b983;
	border-color: #42b983;
	color: white;
}

.step_item.active .step_number {
	background: #42b983;
	border-color: #42b983;
	color: white;
}

.step_label {
	font-size: 14px;
	color: #666;
}

.step_item.active .step_label {
	color: #42b983;
	font-weight: 600;
}

.step_line {
	flex: 1;
	height: 2px;
	background: #ddd;
	margin: 0 1rem;
	margin-bottom: 1.5rem;
}

.step_line.completed {
	background: #42b983;
}

/* 主内容区 */
.main_content {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
}

/* 订单信息卡片 */
.order_info_card {
	background: white;
	padding: 1.5rem 2rem;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	margin-bottom: 1.5rem;
}

.card_title {
	color: #42b983;
	font-size: 18px;
	font-weight: 600;
	margin: 0 0 1rem 0;
}

.order_number {
	margin-bottom: 1rem;
}

.order_number .label,
.payment_amount .label {
	color: #666;
	font-size: 14px;
}

.order_number .value {
	color: #333;
	font-weight: 500;
}

.payment_amount {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.payment_amount .amount {
	color: #ff6600;
	font-size: 24px;
	font-weight: 700;
}

.detail_link {
	color: #42b983;
	font-size: 14px;
	text-decoration: none;
	margin-left: auto;
}

.detail_link:hover {
	text-decoration: underline;
}

/* 详情表格卡片 */
.details_table_card {
	background: white;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	margin-bottom: 1.5rem;
	overflow: hidden;
}

.table_header {
	display: grid;
	grid-template-columns: 2fr 1fr 2fr;
	background: #42b983;
	color: white;
	padding: 1rem 2rem;
	font-weight: 600;
}

.table_body {
	padding: 2rem;
}

.info_row {
	display: grid;
	grid-template-columns: 2fr 1fr 2fr;
	gap: 2rem;
}

.meeting_info .meeting_tag {
	background: #eef9f3;
	color: #42b983;
	padding: 0.25rem 0.75rem;
	border-radius: 4px;
	font-size: 12px;
	display: inline-block;
	margin-bottom: 0.5rem;
}

.meeting_title {
	font-size: 16px;
	font-weight: 600;
	color: #333;
	margin-bottom: 0.75rem;
	line-height: 1.5;
}

.meeting_meta {
	font-size: 14px;
	color: #666;
}

.separator {
	margin: 0 0.5rem;
}

.attendee_count {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: #f8f9fa;
	border-radius: 8px;
}

.count_label {
	font-size: 14px;
	color: #666;
	margin-bottom: 0.5rem;
}

.count_value {
	font-size: 32px;
	font-weight: 700;
	color: #42b983;
	margin-bottom: 0.5rem;
}

.sub_items {
	font-size: 12px;
	color: #999;
	text-align: center;
}

.fee_details {
	padding: 1rem;
	background: #f8f9fa;
	border-radius: 8px;
}

.fee_row {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 1rem;
	padding: 0.75rem 0;
}

.fee_row:first-child {
	font-weight: 600;
	color: #666;
	border-bottom: 2px solid #ddd;
}

.fee_row.highlight {
	background: white;
	padding: 0.75rem 1rem;
	border-radius: 4px;
	margin-top: 0.5rem;
}

.fee_label {
	text-align: left;
}

.fee_value {
	text-align: center;
}

.total_price_row {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 2rem;
	padding: 1.5rem 2rem;
	background: #f8f9fa;
	border-top: 2px solid #e0e0e0;
}

.total_label {
	font-size: 18px;
	font-weight: 600;
	color: #333;
}

.total_amount {
	font-size: 28px;
	font-weight: 700;
	color: #ff6600;
}

/* 支付方式卡片 */
.payment_method_card {
	background: white;
	padding: 2rem;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	margin-bottom: 2rem;
}

.section_title {
	font-size: 18px;
	font-weight: 600;
	color: #333;
	margin: 0 0 1.5rem 0;
}

.payment_option {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem;
	border: 2px solid #42b983;
	border-radius: 8px;
	margin-bottom: 1.5rem;
}

.payment_option input[type="radio"] {
	width: 20px;
	height: 20px;
}

.payment_label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	font-size: 16px;
	color: #333;
}

.more_methods {
	margin-left: auto;
	color: #42b983;
	text-decoration: none;
	font-size: 14px;
}

.more_methods:hover {
	text-decoration: underline;
}

.payment_methods {
	padding: 2rem;
	background: #f8f9fa;
	border-radius: 8px;
}

.method_title {
	font-size: 16px;
	color: #333;
	margin-bottom: 1.5rem;
	text-align: center;
}

.method_options {
	display: flex;
	justify-content: center;
	gap: 2rem;
	margin-bottom: 2rem;
}

.method_item {
	width: 150px;
	padding: 1.5rem;
	background: white;
	border: 2px solid #e0e0e0;
	border-radius: 8px;
	text-align: center;
	cursor: pointer;
	transition: all 0.3s ease;
}

.method_item:hover {
	border-color: #42b983;
	box-shadow: 0 4px 12px rgba(66, 185, 131, 0.2);
}

.method_item.active {
	border-color: #42b983;
	background: #eef9f3;
}

.method_icon {
	margin-bottom: 1rem;
	display: flex;
	justify-content: center;
}

.method_name {
	font-size: 14px;
	color: #333;
	font-weight: 500;
}

.payment_summary {
	text-align: center;
	padding-top: 1.5rem;
	border-top: 2px solid #e0e0e0;
}

.summary_label {
	font-size: 16px;
	color: #666;
	margin-right: 1rem;
}

.summary_amount {
	font-size: 32px;
	font-weight: 700;
	color: #ff6600;
}

/* 提交按钮 */
.submit_section {
	text-align: center;
	margin: 3rem 0;
}

.btn_submit {
	padding: 1rem 4rem;
	background: linear-gradient(135deg, #42b983 0%, #35a372 100%);
	color: white;
	border: none;
	border-radius: 50px;
	font-size: 18px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(66, 185, 131, 0.3);
	transition: all 0.3s ease;
}

.btn_submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(66, 185, 131, 0.4);
}

.btn_submit:active {
	transform: translateY(0);
}

/* 对话框内容 */
.dialog_content {
	padding: 1rem;
}

.detail_row {
	display: flex;
	padding: 1rem 0;
	border-bottom: 1px solid #f0f0f0;
}

.detail_row.total {
	border-bottom: none;
	padding-top: 1.5rem;
	margin-top: 1rem;
	border-top: 2px solid #e0e0e0;
}

.detail_label {
	width: 120px;
	color: #666;
	font-size: 14px;
}

.detail_value {
	flex: 1;
	color: #333;
	font-size: 14px;
}

.detail_row.total .detail_label {
	font-size: 16px;
	font-weight: 600;
}

.detail_row.total .detail_value {
	font-size: 20px;
	font-weight: 700;
	color: #ff6600;
}

/* 支付二维码弹窗样式 */
.payment_modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2000;
	animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.payment_modal_content {
	background: white;
	border-radius: 12px;
	width: 90%;
	max-width: 420px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
	animation: slideUp 0.3s ease;
	overflow: hidden;
}

@keyframes slideUp {
	from {
		transform: translateY(30px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.modal_header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.5rem;
	color: white;
	font-size: 18px;
	font-weight: 600;
}

.modal_header.wechat {
	background: linear-gradient(135deg, #07c160 0%, #06ad56 100%);
}

.modal_header.alipay {
	background: linear-gradient(135deg, #00a0e9 0%, #0093d6 100%);
}

.modal_title {
	font-size: 18px;
	font-weight: 600;
}

.modal_close {
	cursor: pointer;
	font-size: 28px;
	line-height: 1;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: background-color 0.3s;
	color: white;
}

.modal_close:hover {
	background: rgba(255, 255, 255, 0.2);
}

.modal_body {
	padding: 2rem 1.5rem;
	text-align: center;
}

.payment_amount_display {
	margin-bottom: 1.5rem;
}

.amount_label {
	font-size: 16px;
	color: #333;
	margin-right: 0.5rem;
}

.amount_value {
	font-size: 24px;
	font-weight: 700;
	color: #ff6600;
}

.qrcode_container {
	margin: 1.5rem 0;
	display: flex;
	justify-content: center;
}

.qrcode_wrapper {
	width: 280px;
	height: 280px;
	padding: 15px;
	background: #f8f9fa;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.qrcode_image {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.qrcode_loading {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #666;
	font-size: 14px;
}

.payment_tips {
	margin-top: 1.5rem;
	font-size: 14px;
	color: #666;
	line-height: 1.6;
}

.qrcode_refresh_btn {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 36px;
	height: 36px;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	transition: all 0.3s ease;
	z-index: 10;
}

.qrcode_refresh_btn:hover {
	background: white;
	transform: rotate(90deg);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.mock_tip {
	margin-top: 0.75rem;
	padding: 0.75rem;
	background: #fff7e6;
	border: 1px solid #ffd591;
	border-radius: 4px;
	color: #ad6800;
	font-size: 12px;
	line-height: 1.5;
}

.sandbox_tip {
	margin-top: 0.75rem;
	padding: 1rem;
	background: #fff7e6;
	border: 2px solid #faad14;
	border-radius: 4px;
	color: #ad6800;
	font-size: 12px;
	line-height: 1.8;
	text-align: left;
}

.sandbox_tip strong {
	color: #d46b08;
	font-weight: 600;
}

/* 响应式设计 */
@media (max-width: 768px) {
	.info_row {
		grid-template-columns: 1fr;
	}
	
	.fee_row {
		grid-template-columns: 1fr 1fr;
		gap: 0.5rem;
	}
	
	.method_options {
		flex-direction: column;
		align-items: center;
	}

	.payment_modal_content {
		width: 95%;
		max-width: 380px;
	}

	.qrcode_wrapper {
		width: 240px;
		height: 240px;
		padding: 12px;
	}
}
</style>


